// 登录页面

// 滑动验证
/**
 * Created by Alone on 2017/11/6.
 */
var box = document.getElementById('verify_box');
var xbox = document.getElementById('verify_xbox');
var element = document.getElementById('btn');
var b = box.offsetWidth;
var o = element.offsetWidth;
element.ondragstart = function () {
    return false;
};
element.onselectstart = function () {
    return false;
};
element.onmousedown = function (e) {
    var disX = e.clientX - element.offsetLeft;
    document.onmousemove = function (e) {
        var l = e.clientX - disX + o;
        if (l < o) {
            l = o
        }
        if (l > b) {
            l = b
        }
        xbox.style.width = l + 'px';
    };
    document.onmouseup = function (e) {
        var l = e.clientX - disX + o;
        if (l < b) {
            l = o
        } else {
            l = b;
            xbox.innerHTML = '验证通过<div id="btn"><img style="margin-top:-4px" src="../img/img/login_img/kkkk.png"/></div>';
        }
        xbox.style.width = l + 'px';
        document.onmousemove = null;
        document.onmouseup = null;
    };
}
// 密码的显示与影藏getElementsByClassName
var password = document.querySelector('.password');
// console.log(password)
var anniu = document.querySelector('.conceal');
// console.log(anniu)
anniu.addEventListener('click',function(){
    if(password.type==='password')
    {
        password.setAttribute('type','text');
        anniu.classList.add('yincang');
    }else{
        password.setAttribute('type','password');
        anniu.classList.remove('yincang');
    }
})
  


//登录
class Login {
    constructor() {
        this.avoid()
        this.user_check()
        this.btn()
        this.check()
    }
    // 7天免登陆
    avoid(){
        //先看有没有cookie
        if($.cookie('username')==undefined||$.cookie('password')==undefined){
            $('.username').val('')
            $('.password').val('')
        }else{
            $('.username').val($.cookie('username'))
            $('.password').val($.cookie('password'))
            $('.no_pass input')[0].checked=$.cookie('select')
        }
    }



    user_check() {
        // 获得焦点
        $('.login_box').on('focus', '.phone', function () {
            $(this).addClass('ys_show')

            $('.pass_note').html('请输入你的账号名和密码')
        })
        //失去焦点
        $('.login_box').on('blur', '.phone', function () {
            $(this).removeClass('ys_show')
        })
    }
    //复选框状态
    check() {
        // 复选框
        $('.check_box>input').click(function () {
            let type = $('.check_box>input').is(':checked')
            if (type && $('.phone').val() !== '') {
                $('.btn').css('opacity', '1')
            } else(
                $('.btn').css('opacity', '0.4')
            )
        })
    }
    btn() {
        $('.btn').click(function () {
            // 7天免登录状态
            let type_7=$('.no_pass input')[0].checked
            let user = $('.username').val()
            let pass = $('.password').val()
            // console.log(type_7)
            let type = $('.check_box>input').is(':checked')

            //登录判断
            if ($('.phone').val() !== '' && type) {
              
                //获取 对比
                let res = JSON.parse(localStorage.getItem('name')) || []
                // console.log(res)
                let result = res.some(item => {
                    return item.user == user && item.pass == pass
                })
                if (result) {
                        if(type_7){
                            // 存cookie
                        $.cookie('username',user,{expires:7,path:'/'})
                        $.cookie('password',pass,{expires:7,path:'/'})
                        $.cookie('select',type_7,{expires:7,path:'/'})
                        }else{
                            $.cookie('username',user,{expires:7,path:'/'})
                            $.removeCookie('password')
                            $.removeCookie('select')
                        }
                    setInterval(() => {
                        alert('登录成功')
                        location.href = '../index.html'
                    }, 1000)
                } else {
                    $('.pass_note').html('你的账户名或密码不正确')
                    $('.username').val('')
                    $('.password').val('')
                }
            }
        })
    }
}
new Login()